<template>
  <div class="list">
    <el-avatar
      shape="square"
      :size="50"
      :src="photourl(user.photo)"
    ></el-avatar>
    <div class="na">
      <p class="name">{{ user.comments || user.name }}</p>
      <p class="active">{{user.active==1?'在线':'离线'}}</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "friendsList",
  props: {
    user: {
      require: true,
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    photourl(photo) {
      return `${process.env.VUE_APP_SERVER_HOST}${photo}`;
    },
  },
  mounted() {},
};
</script>
<style scoped lang="scss">
.list {
  display: flex;
  margin-top: 2px;
  padding: 5px;
  &:hover {
    background-color: #d0d8e4;
    color: #fff;
    cursor: pointer;
  }
}
.na{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.name {
   padding-left: 15px;
  //  padding-top: 15px;
}
.active {
  
}
</style>